<template>
	<view>
		<scroll-view scroll-y class="scrollPage">
			<view class="UCenter-bg">
				<image src="/static/head.png" class="png" mode="widthFix"></image>
				<view class="text-xl">{{team.name}}
					<!-- <text class="text-df">{{team.desc}}</text> -->
				</view>
				<view class="margin-top-sm">
					<text>管理员{{team.admin_format.nickName}}</text>
				</view>
				<image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif"
					mode="scaleToFill" class="gif-wave"></image>
			</view>
			<view class="cu-list menu card-menu margin-top sm-border">
				<view class="cu-item">
					<view class="content" @click="openModal('name')">
						<text class="cuIcon-profile text-olive"></text>
						<text class="text-grey">{{team.name}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-pic text-olive"></text>
						<text class="text-grey">海报</text>
					</view>
					<view class="action">
						<view class="cu-avatar round sm" :style="'background-image:url('+team.cover+')'"></view>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-friend text-olive"></text>
						<text class="text-grey">成员</text>
					</view>
					<view class="action">
						<view class="cu-avatar-group">
							<view v-for="(item,index) in team.team_members_format" v-if="index<5" :key="index"
								class="cu-avatar round sm" :style="'background-image:url('+item.avatar+')'"></view>
						</view>
						<text class="text-grey text-sm">{{team.team_members_format.length}} 人</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-selection text-olive"></text>
						<text class="text-grey">今日值日</text>
					</view>
					<view class="action">
						<view class="cu-avatar-group">
							<view v-for="(item,index) in team.current_format" v-if="index<5" :key="index"
								class="cu-avatar round sm" :style="'background-image:url('+item.avatar+')'"></view>
						</view>
						<text class="text-grey text-sm">{{team.current_format.length}} 人</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-comment text-olive"></text>
						<text class="text-grey">简介</text>
					</view>
					<view class="action" @click="openModal('desc')">
						<text class="text-grey text-sm">{{team.desc}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-notice text-olive"></text>
						<text class="text-grey">消息通知</text>
					</view>
					<view class="action" >
						<switch style="transform: scale(0.8);" @change="changeNotice" :class="team.notice?'checked':''" :checked="skin?true:false"></switch>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-order text-olive"></text>
						<text class="text-grey">转让管理员</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-exit text-olive"></text>
						<text class="text-grey">退出团队</text>
					</view>
				</view>
				
				<view class="cu-item">
					<button class="cu-btn content" open-type="share">
						<text class="cuIcon-share text-olive"></text>
						<text class="text-grey">邀请好友</text>
					</button>
				</view>
				<!-- <view class="cu-item">
					<view class="content">
						<text class="cuIcon-settings text-olive"></text>
						<text class="text-grey">设置</text>
					</view>
					<view class="action">
						<text class="text-grey text-sm">值日规则</text>
					</view>
				</view> -->
				<view class="cu-item">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-settings text-blue margin-right-xs"></text>值日规则</view>
						<view class="text-gray text-sm">
							<text class="cuIcon-infofill margin-right-xs"></text> 一天一次</view>
					</view>
					<view class="action">
						<text class="cuIcon-settings"></text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text class="cuIcon-warn text-red"></text>
						<text class="text-grey">待审核</text>
					</view>
					<view class="action">
						<text class="text-grey  text-sm">1人</text>
					</view>
				</view>
			</view>



			<view class="cu-list menu card-menu margin-bottom-xl margin-top-xl shadow-lg radius">
				<view class="cu-item arrow">
					<navigator class="content" url="/pages/about/about" hover-class="none">
						<image src="/static/head.png" class="png" mode="aspectFit"></image>
						<text class="text-grey">关于扫地僧</text>
					</navigator>
				</view>
				<view class="cu-item arrow">
					<navigator class="content" url="/pages/logs/logs" hover-class="none">
						<text class="cuIcon-formfill text-green"></text>
						<text class="text-grey">日志</text>
					</navigator>

				</view>
				<view class="cu-item arrow">
					<view class="content" @click="showQrcode">
						<text class="cuIcon-appreciatefill text-red"></text>
						<text class="text-grey">赞赏支持</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<button class="cu-btn content" open-type="feedback">
						<text class="cuIcon-writefill text-cyan"></text>
						<text class="text-grey">意见反馈</text>
					</button>
				</view>
			</view>
			<!-- 输入框 -->
			<view class="cu-modal" :class="modal?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content text-green">修改团队信息</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						<input placeholder="请输入需要修改的数据" v-model="editValue"></input>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @click="hideModal">取消</button>
							<button class="cu-btn bg-green margin-left" @click="confirmModal">确定</button>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modal: false,
				editValue: '',
				team: {
					name: "ggb开发团队",
					id: 0,
					team_members: [],
					team_members_format: [{
							id: '',
							avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
							nickName: 'xxx'
						},
						{
							id: '',
							avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
							nickName: 'xxx'
						},
						{
							id: '',
							avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
							nickName: 'xxx'
						},
						{
							id: '',
							avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg',
							nickName: 'xxx'
						}
					],
					current: {
						group_id: "54",
						update_time: "2021-04-07"
					},
					current_format: [{
							id: '',
							avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
							nickName: 'xxx'
						},
						{
							id: '',
							avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg',
							nickName: 'xxx'
						}
					],
					cover: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg',
					duty_id: "545454",
					admin_user_id: "121",
					admin_format: [{
						id: '',
						avatar: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg',
						nickName: 'leader'
					}],
					status: false,
					notice: false,
					desc: '这是世界上最牛叉的团队'
				}

			}
		},
		onLoad() {
		},
		methods: {
			changeNotice(e){
				this.team.notice=e.detail.value
				uni.showToast({
					title: `公告已${this.team.notice?'开启':'关闭'}`,
					icon: 'none'
				});
			},
			openModal(key) {
				this.modal = key
				this.editValue = this.team[key]
			},
			confirmModal() {
				this.team[this.modal]=this.editValue
				uni.showToast({
					title: '修改成功',
					icon: 'none'
				});
				this.hideModal()
			},
			hideModal() {
				this.modal = false
			},
			showQrcode() {
				uni.previewImage({
					urls: [
						'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1b30ea92-c5e1-4683-a255-ba99b802fe03/e8c58871-9e37-468b-89f7-15e5df18431d.png'],
					current: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1b30ea92-c5e1-4683-a255-ba99b802fe03/e8c58871-9e37-468b-89f7-15e5df18431d.png' // 当前显示图片的http链接      
				})
			}
		},
	}
</script>
<style>
	.UCenter-bg {
		background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
		background-size: cover;
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		width: 750rpx;
		height: 300rpx;
	}
</style>
